<template>
    <el-container class="main">
      <el-header class="header">
        <span>电商后台管理系统</span>
        <el-button type="info">退出</el-button>
      </el-header>
      <el-container class="container">
        <el-aside class="side">
            <div class="top-bar" @click="collapse = !collapse">|||</div>
            <el-menu
                class="el-menu-vertical-demo"
                background-color="#333744"
                text-color="#fff"
                :collapse="collapse"
            >
                <el-sub-menu index="1">
                    <template #title>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="1-1">用户列表</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>
<script setup>
    import { ref } from 'vue'
    let collapse = ref(false)
</script>

<style lang="scss" scoped>
    .main {
        height: 100%;
    }
    .header {
        background-color: #373d41;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        span {
            color: #fff;
            font-size: 23px;
        }
    }
    .side {
        background-color: #333744;
        .top-bar {
            background-color: #4a5064;
            color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 22px;
            cursor: pointer;
            letter-spacing: .12em;
        }
    }
    .container {
        height: calc(100% - 60px);
        .side {
            height: 100%;
            overflow: auto;
        }
    }
</style>

